<template>
	<div class="alarm-monitor-page" style="padding: 20px;">
		<el-row :gutter="10" style="margin-bottom: 12px;" v-show="showFilters">
			<el-col :span="4">
				<el-select v-model="filter.type" placeholder="能源类型" size="small" clearable>
					<el-option label="水" value="水" />
					<el-option label="电" value="电" />
					<el-option label="气" value="气" />
				</el-select>
			</el-col>
			<el-col :span="4">
				<el-select v-model="filter.device" placeholder="设备类型" size="small" clearable filterable>
					<el-option v-for="d in deviceOptions" :key="d" :label="d" :value="d" />
				</el-select>
			</el-col>
			<el-col :span="6">
				<el-date-picker v-model="filter.timeRange" type="daterange" size="small" start-placeholder="开始时间"
					end-placeholder="结束时间" style="width: 100%;" />
			</el-col>
			<el-col :span="4">
				<el-button type="primary" size="small" @click="resetFilters">重置</el-button>
			</el-col>
		</el-row>

		<el-row justify="space-between" style="margin-bottom: 10px;">
			<el-col>
				<el-button type="primary" size="small" @click="showFilters = !showFilters">{{ showFilters ? '隐藏筛选' :
					'查看筛选' }}</el-button>
			</el-col>
			<el-col>
				<el-button type="success" size="small" @click="exportExcel">导出 Excel</el-button>
			</el-col>
		</el-row>

		<el-table :data="sortedAlarms" border style="width: 100%;">
			<el-table-column prop="time" label="预警时间" width="160" />
			<el-table-column prop="type" label="能源" width="60" />
			<el-table-column prop="device" label="设备类型" width="120" />
			<el-table-column prop="content" label="告警内容" />
			<el-table-column label="等级" width="80">
				<template #default="{ row }">
					<el-tag :type="levelColor(row.level)">{{ row.level }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="状态" width="80">
				<template #default="{ row }">
					<el-tag v-if="row.handled" type="success">已处理</el-tag>
					<el-tag v-else type="danger">未处理</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="handledTime" label="处理时间" width="160" />
			<el-table-column prop="person" label="责任人" width="100" />
			<el-table-column prop="note" label="处理说明" />
			<el-table-column label="操作" width="120">
				<template #default="{ $index, row }">
					<el-button size="small" type="primary" plain @click="openDialog($index)"
						:disabled="row.handled">处理</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog v-model="dialogVisible" title="处理告警" width="400px">
			<el-form :model="handleForm" label-width="80px">
				<el-form-item label="责任人"><el-input v-model="handleForm.person" /></el-form-item>
				<el-form-item label="处理说明"><el-input v-model="handleForm.note" type="textarea" /></el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitHandle">确认处理</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import * as XLSX from 'xlsx'
function getBeijingTime() {
	const offset = 8 * 60 * 60 * 1000 // UTC+8
	const local = new Date(Date.now() + offset)
	return local.toISOString().slice(0, 16).replace('T', ' ')
}


const deviceOptions = ['空调', '照明', '电梯', '新风', '插座', '饮水机', '洗手间', '锅炉', '燃气灶', '热水器']
const showFilters = ref(false)
const filter = reactive({ type: '', device: '', timeRange: [] })

const alarmList = ref([
	{ time: '2024-04-11 08:10', type: '电', device: '空调', level: '高', content: '电压异常上升', handled: false },
	{ time: '2024-04-10 22:30', type: '水', device: '饮水机', level: '中', content: '用水量剧增', handled: false },
	{ time: '2024-04-10 16:05', type: '气', device: '锅炉', level: '低', content: '气压波动', handled: true, handledTime: '2024-04-10 17:00', person: '张三', note: '正常波动' },
	{ time: '2024-04-09 14:20', type: '电', device: '照明', level: '高', content: '功率连续超标', handled: false },
	{ time: '2024-04-09 10:05', type: '水', device: '洗手间', level: '低', content: '夜间持续漏水', handled: true, handledTime: '2024-04-09 12:30', person: '李四', note: '更换水龙头' },
	{ time: '2024-04-08 21:50', type: '气', device: '燃气灶', level: '中', content: '供气量下降', handled: false },
	{ time: '2024-04-08 20:10', type: '电', device: '新风', level: '高', content: '风机异常启动', handled: false },
	{ time: '2024-04-07 14:00', type: '水', device: '饮水机', level: '低', content: '连续使用异常', handled: false },
	{ time: '2024-04-07 10:20', type: '电', device: '电梯', level: '中', content: '震动超标', handled: false },
	{ time: '2024-04-06 09:00', type: '气', device: '热水器', level: '高', content: '温度异常升高', handled: false },
	{ time: '2024-04-06 07:30', type: '水', device: '洗手间', level: '中', content: '夜间异常开启', handled: false },
	{ time: '2024-04-05 19:50', type: '气', device: '锅炉', level: '低', content: '间歇性停机', handled: false },
	{ time: '2024-04-05 17:40', type: '电', device: '照明', level: '中', content: '亮度不稳', handled: false },
	{ time: '2024-04-04 22:30', type: '水', device: '饮水机', level: '高', content: '水温过高', handled: false },
	{ time: '2024-04-04 13:10', type: '气', device: '燃气灶', level: '中', content: '火焰不稳定', handled: false },
])

const dialogVisible = ref(false)
const editingIndex = ref(null)
const handleForm = reactive({ person: '', note: '' })

function openDialog(index) {
	editingIndex.value = index
	Object.assign(handleForm, { person: '', note: '' })
	dialogVisible.value = true
}

function submitHandle() {
	if (editingIndex.value !== null) {
		const item = alarmList.value[editingIndex.value]
		item.handled = true
		item.person = handleForm.person
		item.note = handleForm.note
		item.handledTime = getBeijingTime()
		ElMessage.success('处理成功')
		dialogVisible.value = false
	}
}

function levelColor(level) {
	return level === '高' ? 'danger' : level === '中' ? 'warning' : 'success'
}

function resetFilters() {
	filter.type = ''
	filter.device = ''
	filter.timeRange = []
}

const sortedAlarms = computed(() => {
	const levelRank = { 高: 3, 中: 2, 低: 1 }
	return alarmList.value.filter(item =>
		(!filter.type || item.type === filter.type) &&
		(!filter.device || item.device === filter.device) &&
		(!filter.timeRange.length ||
			(new Date(item.time) >= new Date(filter.timeRange[0]) &&
				new Date(item.time) <= new Date(filter.timeRange[1]))
		)
	).sort((a, b) => {
		const levelDiff = levelRank[b.level] - levelRank[a.level]
		return levelDiff !== 0 ? levelDiff : new Date(b.time) - new Date(a.time)
	})
})

function exportExcel() {
	const rows = [['预警时间', '能源', '设备类型', '告警内容', '等级', '状态', '处理时间', '责任人', '处理说明']]
	sortedAlarms.value.forEach(d => {
		rows.push([
			d.time, d.type, d.device, d.content, d.level,
			d.handled ? '已处理' : '未处理',
			d.handledTime || '', d.person || '', d.note || ''
		])
	})
	const ws = XLSX.utils.aoa_to_sheet(rows)
	const wb = XLSX.utils.book_new()
	XLSX.utils.book_append_sheet(wb, ws, '告警记录')
	XLSX.writeFile(wb, '告警记录.xlsx')
}
</script>

<style scoped>
.alarm-monitor-page {
	max-width: 1200px;
	margin: auto;
	font-family: 'Microsoft Yahei', sans-serif;
}
</style>
